<template>
  <div id="asthmaAndAllergicForm" class="asthmaAndAllergicForm-container">
    <el-alert
      v-if="d.title"
      :title="d.title"
      type="warning"
      center
      show-icon
    ></el-alert>
    <el-form ref="formRef" :rules="rules" :model="d.form" label-position="top">
      <radio-form
        v-model="d.form.attr1"
        prop="attr1"
        title="1. 您的孩子有过“喘息”吗 ？"
        :disabled="d.disabled"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <el-form-item v-if="d.form.attr1 === '1'" prop="attr2">
        <span style="padding-left: 10px">
          如有，既往发作多少
          <el-input
            v-model="d.form.attr2"
            class="input"
            :disabled="d.disabled"
          ></el-input>
          天
        </span>
      </el-form-item>

      <radio-form
        v-model="d.form.attr3"
        :disabled="d.disabled"
        prop="attr3"
        title="2. 您的孩子近12个月内有过“喘息”吗？"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <radio-form
        v-model="d.form.attr4"
        :disabled="d.disabled"
        prop="attr4"
        title="3. 您的孩子喘息发作时是否有“咝咝”或“hou hou”等高调的哨笛音 ？"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <radio-form
        v-model="d.form.attr5"
        :disabled="d.disabled"
        prop="attr5"
        title="4. 您的孩子是否有过连续咳嗽多于1个月 ？"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <radio-form
        v-model="d.form.attr6"
        :disabled="d.disabled"
        prop="attr6"
        title="5. 您的孩子是否有过一年内患6次以上呼吸道感染吗，如感冒、咽炎、扁桃体炎、鼻炎、气管炎、肺炎等 ？"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <radio-form
        v-model="d.form.attr7"
        :disabled="d.disabled"
        prop="attr7"
        title="6. 既往在医院就诊中有无诊断过哮喘、喘息性支气管炎、慢性支气管炎、喘息性肺炎 ？"
        :items="[
          { label: '1', value: '有' },
          { label: '0', value: '无' },
        ]"
      ></radio-form>
      <checkbox-form
        v-model="d.form.attr8"
        :disabled="d.disabled"
        prop="attr8"
        title="7. 您的孩子是否有过以下过敏史 ？"
        :items="[
          { label: '0', value: '湿疹或特应性皮炎' },
          { label: '1', value: '过敏性鼻炎' },
          { label: '2', value: '药物过敏' },
          { label: '3', value: '食物过敏' },
          { label: '4', value: '以上均无' },
        ]"
      ></checkbox-form>
      <checkbox-form
        v-model="d.form.attr9"
        :disabled="d.disabled"
        prop="attr9"
        title="8. 家族史 ？"
        :items="[
          { label: '0', value: '孩子的父母有哮喘史' },
          { label: '1', value: '孩子的父母有其他过敏史' },
          { label: '2', value: '孩子的祖父母或外祖父母有哮喘史' },
          { label: '3', value: '孩子的祖父母或外祖父母有其它过敏史' },
          { label: '4', value: '以上均无' },
        ]"
      ></checkbox-form>
      <div class="footer" v-if="!d.disabled">
        <debouncebtn
          class="footer-button"
          type="primary"
          @debounce="onSubmit(d.form)"
        >
          保存
        </debouncebtn>
      </div>
    </el-form>
  </div>
</template>
<script>
  import radioForm from '@/components/RadioForm'
  import checkboxForm from '@/components/CheckboxForm'
  import template from '@/hooks/screeningForm'
  import { ref, onBeforeMount } from 'vue'
  import { queryInfo } from '@/api/modules/reception.js'
  import debouncebtn from '@/components/DebounceBtn'
  export default {
    // 儿童哮喘评估院外
    name: 'asthmaAndAllergicForm',
    props: { id: Number, pid: Number },
    emits: ['success'],
    components: { radioForm, checkboxForm, debouncebtn },
    data() {
      return {
        isShow: true,
        printObj: {
          id: 'asthmaAndAllergicForm',
          preview: false,
          previewTitle: '点击下方按钮进行打印',
          popTitle: '儿童哮喘与过敏性疾病筛查表',
          // extraCss: require('@/styles/asthmaAndAllergicForm.css'),
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
      }
    },
    setup(props, context) {
      let day = ref(null)
      let label = ref(label)
      let checkLable = ref([])
      const print = function () {}
      // 初始化
      onBeforeMount(async () => {
        if (props.id) {
          d.disabled = true
          let res = await queryInfo({ id: props.id, patientId: props.pid })
          if (res.data) {
            d.form = res.data
            d.title = res.message
          }
        }
      })
      const { pageData, rulesTemplate, toSave } = template()
      // 表单相关
      const d = pageData()
      const rules = rulesTemplate()
      const formRef = ref(null)
      const onSubmit = async function (form) {
        const save = toSave()
        const res = await save(formRef, form, {
          id: props.id,
          patientId: props.pid,
          screeningType: 3,
        })
        d.title = res.data.message
        context.emit('success')
      }
      return {
        day,
        label,
        checkLable,
        print,
        d,
        onSubmit,
        rules,
        formRef,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .asthmaAndAllergicForm-container {
    padding: 22px;
    .input {
      display: inline-block;
      width: 50px;
      :deep(.el-input__inner) {
        border-radius: 0;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9d9d9;
        vertical-align: middle;
        height: 30px;
        font-size: 17px;
        text-align: center;
      }
    }
    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
  //一定全局定义样式
  @media print {
    //打印的样式
    #frames {
      // width: 100%;
      // height: calc(100vh - 220px);
    }
  }
</style>
